<template>
  <!-- 查询条件 -->
  <div class="fml-forms" ref="searchHeight">
    <div class="ui-forms-bodr">
      <el-form
        :inline="true"
        id="form"
        :model="Config.fmlForm"
        ref="Config.fmlForm"
        class="demo-form-inline"
        @submit.native.prevent
      >
        <fml-input :FormConfig="Config" :showMore="showMore" ref="fmlInput"></fml-input>
      </el-form>
    </div>
    <div
      class="ui-forms-footer"
      :class="Config.defaultConfig.form.length>2?'flex':''"
      v-if="Config.defaultConfig.search || Config.defaultConfig.reset"
    >
      <div class="fml-more-search flex-1 tc" v-if="Config.defaultConfig.form.length>2">
        <el-button
          type="text"
          size="small"
          class="search-active"
          @click.native="showMoreSearch"
        >更多搜索</el-button>
        <i :class="showMore?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
      </div>
      <el-button
        size="small"
        @click.native="resetForm"
        icon="el-icon-rank"
        v-if="Config.defaultConfig.reset"
      >{{Config.defaultConfig.reset}}</el-button>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click.native="searchHandle"
        v-if="Config.defaultConfig.search"
        :loading="loading"
      >{{Config.defaultConfig.search}}</el-button>
    </div>
  </div>
</template>
<script>
import { FmlTools } from "@/utils";
import defaultConfig from "./config";
export default {
  name: "fmlSearchForm",
  data() {
    return {
      showMore: false,
      resetParam:{}
    };
  },
  props: {
    extralSearchParam: Array, //搜索条件除表单数据之外的条件参数[{key:'',value:''}]
    formConfig: Object, //表单配置对象
    autoSearchData: Array,
    loading: Boolean //是否加载状态
  },
  computed: {
    //表单配置
    Config() {
      return { ...defaultConfig, ...this.formConfig };
    },
    //搜索请求参数
    apiParam() {
      let roles={}
      let organIds={}
      const searchConditionsObj = {};
      if (this.extralSearchParam) {
        this.extralSearchParam.map(extral => {
          searchConditionsObj[extral.key] = extral.value;
        });
      }
       // 角色复选
      if(this.Config.fmlForm.roleIds&&this.Config.fmlForm.roleIds.length>0){
        roles={roleIds:this.Config.fmlForm.roleIds.join(',')}
      }
      // 机构复选
      if(this.Config.fmlForm.organIds&&this.Config.fmlForm.organIds.length>0){
        organIds={organIds:this.Config.fmlForm.organIds.join(',')}
      }
      return {
        ...searchConditionsObj,
        ...this.Config.fmlForm,
        ...organIds,
        ...roles
      };
    }
  },
  methods: {
    //点击查询时将请求参数抛出去
    searchHandle() {
      if(this.$store.state.searchParam==this.apiParam){
        this.$store.commit('updateTable')
        return
      }
      this.$store.commit("setSearchParam", this.apiParam);
    },
    // 清空搜索条件
    resetForm() {
     console.log('等待开发')
    },
    // 显示所有搜索项
    showMoreSearch() {
      this.showMore = !this.showMore;
      let formInputLength = this.formConfig.defaultConfig.form.length;
      if (this.showMore) {
        let otherHeight = formInputLength * 55 + 55;
        this.$store.commit("setOtherHeight", otherHeight);
      } else {
        let otherHeight =formInputLength > 2 ? 2 * 55 + 55 : formInputLength * 55 + 55;
        this.$store.commit("setOtherHeight", otherHeight);
      }
    }
  },
  mounted() {
    let formInputLength = this.formConfig.defaultConfig.form.length;
    let otherHeight =formInputLength > 2 ? 2 * 55 + 55 : formInputLength * 55 + 55;
    this.$store.commit("setOtherHeight", otherHeight);
  },
  created() {
    this.$store.commit("resetSearch");
   this.resetParam={...{},...this.Config.fmlForm}
  }
};
</script>
